<template>
  <div class="conten">
    <el-form ref="form" :rules="rules" :model="formData" label-width="100px" class="form">
      <el-form-item label="短剧名称">
        <el-input v-model="formData.title" clearable :disabled="true" />
      </el-form-item>
      <el-form-item label="制作方">
        <el-input v-model="formData.producer" clearable :disabled="true" />
      </el-form-item>
      <el-form-item v-if="formData.number_type==1" label="剧目备案号">
        <el-input v-model="formData.certificate_number" clearable :disabled="true" />
      </el-form-item>
      <div v-if="formData.number_type==2">
        <el-form-item label="网络剧片发行许可证编号" class="lineHeight">
          <el-input v-model="formData.certificate_number" clearable :disabled="true" />
        </el-form-item>
        <el-form-item label="网络剧片发行许可证(原件)" class="lineHeight">
          <Upload
            tip="建议图片大小不能超过2MB，支持jpg、jpeg、png格式"
            :url="formData.publish_license_image"
            @resultUpload="onUpLoad"
          ></Upload>
        </el-form-item>
      </div>
      <el-form-item label="剧目播放授权材料" prop="authorized_material_image" class="lineHeight">
        <Upload
          tip="建议图片大小不能超过2MB，支持jpg、jpeg、png格式"
          :url="formData.authorized_material_image"
          @resultUpload="onUpLoadImage"
        ></Upload>
      </el-form-item>
    </el-form>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button class="btn" @click="close">取 消</el-button>
        <el-button class="btn" type="primary" :loading="loading" @click="onSubmit">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Upload from '@/common/component/upload.vue'
import { getCheckInfo, checkPlaylet } from '@/api/appContent/theater'
export default {
  components: {
    Upload
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        mini_app_id: localStorage.mini_app_id,
        number_type: 1,
        producer: '',
        certificate_number: '',
        publish_license_image: '',
        authorized_material_image: ''
      },
      rules: {
        authorized_material_image: [{ required: true, message: '请选择图片', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.getCheckInfo()
    this.formData.playlet_id = this.data.playlet_id * 1 || ''
  },
  methods: {
    getCheckInfo() {
      const data = {
        playlet_id: this.data.id,
        mini_playlet_id: this.data.mini_playlet_id
      }
      getCheckInfo(data).then(res => {
        if (res.status_code === 1) {
          this.formData = { mini_app_id: localStorage.mini_app_id, ...res.data }
        }
      })
    },
    close() {
      this.$emit('cancel')
    },
    async onSubmit() {
      this.loading = true
      const params = {
        mini_playlet_id: this.data.mini_playlet_id,
        playlet_id: this.data.id,
        authorized_material_image: this.formData.authorized_material_image
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          checkPlaylet(params).then((res) => {
            if (res.status_code == 1) {
              this.$message.success(res.msg)
              this.$emit('ok')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      this.loading = false
    },
    onUpLoadImage(url, type) {
      this.formData.authorized_material_image = url
    },
    onUpLoad(url, type) {
      this.formData.publish_license_image = url
    }
  }
}
</script>
  <style lang="scss" scoped>
  .conten {
    width: 400px;
    .form{
      padding: 20px;
    }
  }
  </style>